<template>
	<view class='my-order bg-active-color'>
		<Lines></Lines>
		<view class='order-header'>
			<view class='header-item' v-for='(item,index) in tabList' :key='index' :class=' tabIndex==index?"active":""  '
				@tap='changeTab(index)'>{{item.name}}</view>
		</view>

		<block v-for='(tabItem,tabI) in tabList' :key='tabI' :style="'height:'+clentHeight+'px;'">
			<view v-show='tabI===tabIndex'>
				<view v-if='tabItem.list.length > 0' class='order-main' :style="'height:'+clentHeight+'px;'">
					<!--商品  class="order-main-60rpx" -->
					<view v-for='(k,i) in tabItem.list' :class='i ===(tabItem.list.length-1) ?"order-main-60rpx":"" ' :key='i'>
						<view class='order-goods'>
							<view class='goods-status f-active-color'>{{ k.status }}</view>
							<view class='goods-item' v-for='(item,index) in k.goods_item'  :key='index' >
								<OrderList :item='item' :index='index'></OrderList>
							</view>
						</view>

						<!-- 固定顶部 -->
						<view class="yab-xiding">

							<view class="yab-xle">
								<Lines></Lines>
								<!--总价-->
								<view class='total-price'>
									订单金额: <text class='f-active-color'>¥{{k.totalPrice}}</text> (包含运费¥0.00)
								</view>
							</view>

							<view class="yab-xrl">
								<Lines></Lines>
								<!--支付-->
								<view class='payment'>
									<view class='payment-text f-active-color'>支付</view>
								</view>
							</view>

						</view>

					</view>
				</view>

				<view v-else class='no-order' :style="'height:'+clentHeight+'px;'">
					<view>您还没有相关订单</view>
					<view class='no-order-home'>去首页逛逛</view>
				</view>

			</view>
		</block>
	</view>
</template>

<script>
	// 前端实现吸顶 uniapp实现吸顶 置顶的效果
	// https://blog.csdn.net/qq_40630924/article/details/106054969
	import Lines from '@/components/common/Lines.vue'
	import OrderList from '@/components/order/order-list.vue'
	export default {
		data() {
			return {
				//高度
				clentHeight: 0,
				//当前位置
				tabIndex: 0,
				//顶部选项卡的数据
				tabList: [{
						name: "全部",
						list: [{
								status: "待付款",
								totalPrice: '3999.00',
								goods_item: [{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "1"
									},
									{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "5"
									}, {
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "1"
									},
									{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "5"
									}, {
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "1"
									},
									{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "5"
									}, {
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "1"
									},
									{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "5"
									}, {
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "1"
									},
									{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "5"
									}
								]
							},
							{
								status: "待发货",
								totalPrice: '3999.00',
								goods_item: [{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "1"
									},
									{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "5"
									}, {
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "1"
									},
									{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "5"
									}, {
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "1"
									},
									{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "5"
									}, {
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "1"
									},
									{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "5"
									}, {
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "1"
									},
									{
										imgUrl: "../../static/img/Children3.jpg",
										name: "大姨绒毛大款2020年必须买,不买你就不行了必须买",
										attrs: "黑色",
										pprice: "299.00",
										num: "5"
									}
								]
							},
						]
					},
					{
						name: "待付款",
						list: []
					},
					{
						name: "待发货",
						list: []
					},
					{
						name: "待收货",
						list: []
					},
					{
						name: "待评价",
						list: []
					},
				]
			}
		},
		onReady() {

			uni.getSystemInfo({
				success: (res) => {
					this.clentHeight = res.windowHeight - this.getClientHeight();
				}
			})

		},
		components: {
			Lines,
			OrderList
		},
		methods: {
			//顶部切换
			changeTab(index) {
				this.tabIndex = index;
			},
			//获取可视区域高度【兼容】
			getClientHeight() {
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if (system === 'ios') {
					return 44 + res.statusBarHeight;
				} else if (system === 'android') {
					return 48 + res.statusBarHeight;
				} else {
					return 0;
				}
			}
		}
	}
</script>

<style scoped>
	.no-order {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
	}

	.no-order-home {
		padding: 6rpx 60rpx;
		border: 2rpx solid #49BDFB;
		color: #49BDFB;
		border-radius: 40rpx;
	}

	.order-header {
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid #F7F7F7;
		/* 
		position: -webkit-sticky;
		position: sticky; */
		position: fixed;
		width: 100%;
		top: var(--window-top);
		z-index: 9999;
	}

	.header-item {
		text-align: center;
		flex: 1;
		line-height: 120rpx;
	}

	.active {
		border-bottom: 4rpx solid #49BDFB;
	}


	.goods-status {
		display: flex;
		justify-content: flex-end;
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.total-price {
		display: flex;
		justify-content: flex-end;
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.yab-xiding {
		background-color: #FFFFFF;
		position: fixed;
		bottom: var(--window-bottom, 0);
		left: 0;
		flex-direction: column;
		width: 100%;
		/* 	height: 100rpx; */
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-bottom: 20rpx;
	}


	.payment {
		/* 	
			display: flex;
			justify-content: flex-end;
			background-color: #FFFFFF;
			padding:20rpx;
			bottom: var(--window-bottom, 0); 
	  */

		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.payment-text {
		border: 2rpx solid #49BDFB;
		padding: 6rpx 40rpx;
		border-radius: 30rpx;
	}

	.order-main {
		margin-top: 120rpx;
	}

	/* 自定义固定底部 */
	.order-main-60rpx {
		padding-bottom: 180rpx;
	}

	.yab-xle {
		width: 100%;
	}

	.yab-xre,
	.yab-xrl {
		height: 70rpx;
	}
</style>